React Custom Hook Kompozitsiyasi: Global Dasturchilar uchun Murakkab Mantiqni Boshqarish

            // useFetch.js
import { useState, useEffect } from 'react';

function useFetch(url, options = {}) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(url, options);
        if (!response.ok) {
          throw new Error(`HTTP xatosi! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url, JSON.stringify(options)]); // Qayta yuklash uchun bog'liqliklar

  return { data, loading, error };
}

export default useFetch;

// usePagination.js
import { useState } from 'react';

function usePagination(totalPages, initialPage = 1) {
  const [currentPage, setCurrentPage] = useState(initialPage);

  const nextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage(currentPage + 1);
    }
  };

  const prevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  const goToPage = (page) => {
    if (page >= 1 && page <= totalPages) {
      setCurrentPage(page);
    }
  };

  return {
    currentPage,
    totalPages,
    nextPage,
    prevPage,
    goToPage,
    setPage: setCurrentPage // Agar kerak bo'lsa, to'g'ridan-to'g'ri o'rnatuvchi
  };
}

export default usePagination;

// usePaginatedFetch.js (Kompozitsiyalangan Hook)
import useFetch from './useFetch';
import usePagination from './usePagination';

function usePaginatedFetch(baseUrl, initialPage = 1, itemsPerPage = 10) {
  // usePagination'ni ishga tushirish uchun umumiy sahifalar sonini bilishimiz kerak. Bu dastlabki so'rov yoki tashqi manbani talab qilishi mumkin.
  // Bu yerda soddalik uchun, umumiy sahifalar soni qandaydir tarzda ma'lum yoki birinchi navbatda alohida olingan deb faraz qilamiz.
  // Bardoshliroq yechim avval umumiy sahifalar sonini oladi yoki server tomonidan boshqariladigan sahifalash yondashuvidan foydalanadi.

  // totalPages uchun to'ldiruvchi - real ilovada bu API javobidan keladi.
  const [totalPages, setTotalPages] = useState(1);
  const [apiData, setApiData] = useState(null);
  const [fetchLoading, setFetchLoading] = useState(true);
  const [fetchError, setFetchError] = useState(null);

  // Sahifa holatini boshqarish uchun sahifalash hookidan foydalanish
  const { currentPage, ...paginationControls } = usePagination(totalPages, initialPage);

  // Joriy sahifa uchun URL manzilini tuzish
  const apiUrl = `${baseUrl}?page=${currentPage}&limit=${itemsPerPage}`;

  // Joriy sahifa ma'lumotlarini olish uchun fetch hookidan foydalanish
  const { data: pageData, loading: pageLoading, error: pageError } = useFetch(apiUrl);

  // pageData o'zgarganda yoki dastlabki so'rov sodir bo'lganda totalPages va ma'lumotlarni yangilash uchun effekt
  useEffect(() => {
    if (pageData) {
      // API javobi { items: [...], total: N } kabi tuzilishga ega deb faraz qilamiz
      setApiData(pageData.items || pageData);
      if (pageData.total !== undefined && pageData.total !== totalPages) {
        setTotalPages(Math.ceil(pageData.total / itemsPerPage));
      } else if (Array.isArray(pageData)) { // Agar umumiy son taqdim etilmagan bo'lsa, zaxira variant
        setTotalPages(Math.max(1, Math.ceil(pageData.length / itemsPerPage)));
      }
      setFetchLoading(false);
    } else {
      setApiData(null);
      setFetchLoading(pageLoading);
    }
    setFetchError(pageError);
  }, [pageData, pageLoading, pageError, itemsPerPage, totalPages]);

  return {
    data: apiData,
    loading: fetchLoading,
    error: fetchError,
    ...paginationControls // Sahifalash boshqaruvlarini yoyish (nextPage, prevPage va h.k.)
  };
}

export default usePaginatedFetch;

            

              
                Copy
              
            
          

            
import React from 'react';
import usePaginatedFetch from './usePaginatedFetch';

function ProductList() {
  const apiUrl = 'https://api.example.com/products'; // O'zingizning API manzilingiz bilan almashtiring
  const { data: products, loading, error, nextPage, prevPage, currentPage, totalPages } = usePaginatedFetch(apiUrl, 1, 5);

  if (loading) return 
Mahsulotlar yuklanmoqda...
;
  if (error) return 
Mahsulotlarni yuklashda xatolik: {error.message}
;
  if (!products || products.length === 0) return 
Mahsulotlar topilmadi.
;

  return (
    

      
Mahsulotlar
      

        {products.map(product => (
          
{product.name}
        ))}
      
      

        Oldingi
         Sahifa {currentPage} / {totalPages} 
        Keyingi
      
    
  );
}

export default ProductList;

            

              
                Copy
              
            
          

            // useWebSocket.js (WebSocket uchun yordamchi hook)
import { useState, useEffect } from 'react';

function useWebSocket(url) {
  const [message, setMessage] = useState(null);
  const [isConnecting, setIsConnecting] = useState(true);
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    if (!url) return;
    setIsConnecting(true);
    setIsConnected(false);
    const ws = new WebSocket(url);

    ws.onopen = () => {
      console.log('WebSocket Ulandi');
      setIsConnected(true);
      setIsConnecting(false);
    };

    ws.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data);
        setMessage(data);
      } catch (e) {
        console.error('WebSocket xabarini pars qilishda xatolik:', e);
        setMessage(event.data); // Agar kerak bo'lsa, JSON bo'lmagan xabarlarni qayta ishlash
      }
    };

    ws.onclose = () => {
      console.log('WebSocket Uzildi');
      setIsConnected(false);
      setIsConnecting(false);
      // Ixtiyoriy: Bu yerda qayta ulanish mantig'ini amalga oshirish
    };

    ws.onerror = (error) => {
      console.error('WebSocket Xatosi:', error);
      setIsConnected(false);
      setIsConnecting(false);
    };

    // Tozalash funksiyasi
    return () => {
      if (ws.readyState === WebSocket.OPEN) {
        ws.close();
      }
    };
  }, [url]);

  return { message, isConnecting, isConnected };
}

export default useWebSocket;

// useFetchWithRealtime.js (Kompozitsiyalangan Hook)
import useFetch from './useFetch';
import useWebSocket from './useWebSocket';

function useFetchWithRealtime(fetchUrl, realtimeUrl, initialData = null) {
  const fetchResult = useFetch(fetchUrl);
  // Real vaqtdagi yangilanishlar bir xil yoki bog'liq resursga asoslangan deb faraz qilamiz
  // Real vaqtdagi xabarlarning tuzilishi fetchResult.data'ni qanday yangilashimizga mos kelishi kerak
  const { message: realtimeMessage } = useWebSocket(realtimeUrl);

  const [combinedData, setCombinedData] = useState(initialData);
  const [isRealtimeUpdating, setIsRealtimeUpdating] = useState(false);

  // Olingan ma'lumotlar bilan real vaqtdagi yangilanishlarni integratsiya qilish uchun effekt
  useEffect(() => {
    if (fetchResult.data) {
      // combinedData'ni dastlabki olingan ma'lumotlar bilan ishga tushirish
      setCombinedData(fetchResult.data);
      setIsRealtimeUpdating(false);
    }
  }, [fetchResult.data]);

  useEffect(() => {
    if (realtimeMessage && fetchResult.data) {
      setIsRealtimeUpdating(true);
      // realtimeMessage asosida ma'lumotlarni birlashtirish yoki almashtirish mantig'i
      // Bu sizning API va real vaqtdagi xabar tuzilmangizga juda bog'liq.
      // Misol: Agar realtimeMessage ro'yxat uchun yangilangan elementni o'z ichiga olsa:
      if (Array.isArray(fetchResult.data)) {
        setCombinedData(prevData => {
          const updatedItems = prevData.map(item =>
            item.id === realtimeMessage.id ? { ...item, ...realtimeMessage } : item
          );
          // Agar real vaqtdagi xabar yangi element uchun bo'lsa, uni qo'shishingiz mumkin.
          // Agar o'chirilgan element uchun bo'lsa, uni filtrlashingiz mumkin.
          return updatedItems;
        });
      } else if (typeof fetchResult.data === 'object' && fetchResult.data !== null) {
        // Misol: Agar bu bitta ob'ektni yangilash bo'lsa
        if (realtimeMessage.id === fetchResult.data.id) {
          setCombinedData({ ...fetchResult.data, ...realtimeMessage });
        }
      }
      // Qisqa vaqtdan keyin yangilanish bayrog'ini qayta o'rnatish yoki boshqacha ishlash
      const timer = setTimeout(() => setIsRealtimeUpdating(false), 500);
      return () => clearTimeout(timer);
    }
  }, [realtimeMessage, fetchResult.data]); // Yangilanishlarga reaksiya bildirish uchun bog'liqliklar

  return {
    data: combinedData,
    loading: fetchResult.loading,
    error: fetchResult.error,
    isRealtimeUpdating
  };
}

export default useFetchWithRealtime;

            

              
                Copy
              
            
          

            
import React from 'react';
import useFetchWithRealtime from './useFetchWithRealtime';

function DashboardWidgets() {
  const dataUrl = 'https://api.example.com/widgets';
  const wsUrl = 'wss://api.example.com/widgets/updates'; // WebSocket manzili

  const { data: widgets, loading, error, isRealtimeUpdating } = useFetchWithRealtime(dataUrl, wsUrl);

  if (loading) return 
Vidjetlar yuklanmoqda...
;
  if (error) return 
Xatolik: {error.message}
;

  return (
    

      
Vidjetlar
      {isRealtimeUpdating && 
Yangilanmoqda...
}
      

        {widgets.map(widget => (
          
{widget.name} - Holat: {widget.status}
        ))}
      
    
  );
}

export default DashboardWidgets;

            

              
                Copy
              
            
          

            // useLocalStorage.js
import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error('Lokal xotiradan o`qishda xatolik:', error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore = typeof value === 'function' ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error('Lokal xotiraga yozishda xatolik:', error);
    }
  };

  return [storedValue, setValue];
}

export default useLocalStorage;

// UserPreferencesContext.js
import React, { createContext, useContext } from 'react';
import useLocalStorage from './useLocalStorage';

const UserPreferencesContext = createContext();

export const UserPreferencesProvider = ({ children }) => {
  const [theme, setTheme] = useLocalStorage('app-theme', 'light');
  const [language, setLanguage] = useLocalStorage('app-language', 'en');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  const changeLanguage = (lang) => {
    setLanguage(lang);
  };

  return (
    
      {children}
    
  );
};

// useUserPreferences.js (Kontekstni iste'mol qilish uchun maxsus hook)
import { useContext } from 'react';
import { UserPreferencesContext } from './UserPreferencesContext';

function useUserPreferences() {
  const context = useContext(UserPreferencesContext);
  if (context === undefined) {
    throw new Error('useUserPreferences UserPreferencesProvider ichida ishlatilishi kerak');
  }
  return context;
}

export default useUserPreferences;

            

              
                Copy
              
            
          

            
// App.js
import React from 'react';
import { UserPreferencesProvider } from './UserPreferencesContext';
import UserProfile from './UserProfile';
import SettingsPanel from './SettingsPanel';

function App() {
  return (
    
      
      
    
  );
}

export default App;

// UserProfile.js
import React from 'react';
import useUserPreferences from './useUserPreferences';

function UserProfile() {
  const { theme, language } = useUserPreferences();

  return (
    

      
Foydalanuvchi Profili
      
Til: {language}
      
Joriy Mavzu: {theme}
    
  );
}

export default UserProfile;

// SettingsPanel.js
import React from 'react';
import useUserPreferences from './useUserPreferences';

function SettingsPanel() {
  const { theme, toggleTheme, language, changeLanguage } = useUserPreferences();

  return (
    

      
Sozlamalar
      
        {theme === 'light' ? 'To\'q' : 'Ochiq'} Rejimga o'tish
      
      

        Til:
         changeLanguage(e.target.value)}>
          English
          Español
          Français
          {/* Kerak bo'lganda ko'proq tillarni qo'shing */}
        
      
    
  );
}

export default SettingsPanel;

            

              
                Copy
              
            
          

            // useCounter.js (Logga yozish uchun oddiy hook)
import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);

  return { count, increment, decrement };
}

export default useCounter;

// withLogging.js (Yuqori darajali hook)
import { useRef, useEffect } from 'react';

function withLogging(WrappedHook) {
  // Aslini o'rab oladigan yangi hookni qaytarish
  return (...args) => {
    const hookResult = WrappedHook(...args);
    const hookName = WrappedHook.name || 'AnonymousHook'; // Log yozish uchun hook nomini olish
    const previousResultRef = useRef();

    useEffect(() => {
      if (previousResultRef.current) {
        console.log(`%c[${hookName}] O'zgarish aniqlandi:`, 'color: blue; font-weight: bold;', {
          previous: previousResultRef.current,
          current: hookResult
        });
      } else {
        console.log(`%c[${hookName}] Dastlabki render:`, 'color: green; font-weight: bold;', hookResult);
      }
      previousResultRef.current = hookResult;
    }, [hookResult, hookName]); // Agar hookResult yoki hookName o'zgarsa, effektni qayta ishga tushirish

    return hookResult;
  };
}

export default withLogging;

            

              
                Copy
              
            
          

            
import React from 'react';
import useCounter from './useCounter';
import withLogging from './withLogging';

// useCounter'ning log yoziladigan versiyasini yaratish
const useLoggedCounter = withLogging(useCounter);

function CounterComponent() {
  // Kuchaytirilgan hookdan foydalanish
  const { count, increment, decrement } = useLoggedCounter(0);

  return (
    

      
Hisoblagich
      
Hisob: {count}
      Oshirish
      Kamaytirish
    
  );
}

export default CounterComponent;

            

              
                Copy